<template>
  <div>
    <!--    <div class="form_title">
          <h3>欢迎登录</h3>
        </div>-->
    <!--    <div class="form_logo">-->
    <img class="form_logo" src="@/assets/zt-logo2.png" alt="" />
    <!--    </div>-->
    <div style="margin: 40px 0 0 !important;">
      <a-form-model :hideRequiredMark="true" ref="form" :model="model" :rules="validatorRules" labelAlign="left"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol">
        <a-form-model-item required label="登录账号" prop="username">
          <a-input v-model="model.username" placeholder="请输入登录账号（必填）">
            <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
          </a-input>
        </a-form-model-item>
        <a-form-model-item required label="登录密码" prop="password">
          <a-input v-model="model.password" type="password" autocomplete="false" placeholder="请输入登录密码（必填）">
            <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
          </a-input>
        </a-form-model-item>

        <a-row :gutter="0">
          <a-col :span="15">
            <a-form-model-item required :label-col="{span: 8}" :wrapper-col="{span: 16}" label="验证码"
                               prop="inputCode">
              <a-input v-model="model.inputCode" type="text" placeholder="请输入验证码">
                <a-icon slot="prefix" type="safety" :style="{ color: 'rgba(0,0,0,.25)' }" />
              </a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="9" style="text-align: right">
            <img v-if="requestCodeSuccess" style="margin-top: 2px" :src="randCodeImage"
                 @click="handleChangeCheckCode" />
            <img v-else style="margin-top: 2px" src="../../assets/checkcode.png" @click="handleChangeCheckCode" />
          </a-col>
        </a-row>
      </a-form-model>
    </div>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import Vue from 'vue'
import { mapActions } from 'vuex'

export default {
  name: 'LoginAccount',
  data() {
    return {
      requestCodeSuccess: false,
      randCodeImage: '',
      currdatetime: '',
      loginType: 0,
      model: {
        username: '', // admin
        password: '', // Aa123456&
        inputCode: ''
      },
      validatorRules: {
        username: [{ required: true, message: '请输入登录账号!' }, { validator: this.handleUsernameOrEmail }],
        password: [
          {
            required: true,
            message: '请输入登录密码!',
            validator: 'click'
          }
        ],
        inputCode: [
          {
            required: true,
            message: '请输入验证码!'
          }
        ]
      },
      labelCol: { span: 5 },
      wrapperCol: { span: 19 }
    }
  },
  created() {
    this.handleChangeCheckCode()
  },
  methods: {
    ...mapActions(['Login']),
    /**刷新验证码*/
    handleChangeCheckCode() {
      this.currdatetime = new Date().getTime()
      this.model.inputCode = ''
      getAction(`/sys/randomImage/${this.currdatetime}`)
        .then((res) => {
          if (res.success) {
            this.randCodeImage = res.result
            this.requestCodeSuccess = true
          } else {
            this.$message.error(res.message)
            this.requestCodeSuccess = false
          }
        })
        .catch(() => {
          this.requestCodeSuccess = false
        })
    },
    // 判断登录类型
    handleUsernameOrEmail(rule, value, callback) {
      const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/
      if (regex.test(value)) {
        this.loginType = 0
      } else {
        this.loginType = 1
      }
      callback()
    },
    /**
     * 验证字段
     * @param arr
     * @param callback
     */
    validateFields(arr, callback) {
      let promiseArray = []
      for (let item of arr) {
        let p = new Promise((resolve, reject) => {
          this.$refs['form'].validateField(item, (err) => {
            if (!err) {
              resolve()
            } else {
              reject(err)
            }
          })
        })
        promiseArray.push(p)
      }
      Promise.all(promiseArray)
        .then(() => {
          callback()
        })
        .catch((err) => {
          callback(err)
        })
    },
    acceptUsername(username) {
      this.model['username'] = username
    },
    //账号密码登录
    handleLogin(rememberMe) {
      this.validateFields(['username', 'password', 'inputCode'], (err) => {
        if (!err) {
          let loginParams = {
            username: this.model.username,
            password: this.model.password,
            captcha: this.model.inputCode,
            checkKey: this.currdatetime,
            remember_me: rememberMe,
            systemType: 1
          }
          console.log('登录参数', loginParams)
          this.Login(loginParams)
            .then((res) => {
              this.$emit('success', res.result)
            })
            .catch((err) => {
              this.$emit('fail', err)
            })
        } else {
          this.$emit('validateFail')
        }
      })
    }
  }
}
</script>

<style scoped>
.form_title {
  text-align: center;
  font-size: 25px;
  margin-bottom: 32%;
}

.form_logo {
  width: 250px;
  display: block;
  margin: 0 auto;
}

.form_title h3 {
  display: inline-block;
  padding-bottom: 5px;
  border-bottom: 1px solid #133a86;
}

/deep/ .ant-form-item {
  border-bottom: 1px solid #D9D9D9;
  margin-bottom: 10%;
}

/deep/ .ant-input {
  border: unset;
}

/deep/ .ant-form-item-label {
  text-align-last: justify;
  text-align: justify;
  text-justify: distribute-all-lines;
}

/deep/ .ant-form-item-label > label {
  font-size: 14px;
  color: #000;
  font-weight: 700;
}

/deep/ .ant-form-explain{
  padding-top: 2px;
  font-size: 12px;
  position: absolute;
  top: 100%;
  left: 0;
}
</style>